<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PIS系统智能诊断助手 - 分页显示版</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --light-color: #ecf0f1;
            --success-color: #2ecc71;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            min-height: 80vh;
        }
        
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1.5rem;
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }
        
        h1 {
            font-size: 2.2rem;
            margin-bottom: 0.5rem;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .page-container {
            position: relative;
            min-height: 500px;
        }
        
        .page {
            display: none;
            background: white;
            border-radius: 10px;
            padding: 2rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 2rem;
            animation: fadeIn 0.5s ease-in-out;
        }
        
        .page.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .section-title {
            font-size: 1.6rem;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--light-color);
        }
        
        .symptom-category {
            margin-bottom: 2rem;
            padding: 1rem;
            background: #f9f9f9;
            border-radius: 8px;
        }
        
        .category-title {
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--secondary-color);
            font-size: 1.2rem;
        }
        
        .symptoms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 12px;
        }
        
        .symptom-option {
            display: flex;
            align-items: center;
            padding: 8px;
            background: white;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        
        .symptom-option:hover {
            background-color: #f0f0f0;
        }
        
        .symptom-option input {
            margin-right: 10px;
            transform: scale(1.2);
        }
        
        .btn {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn:hover {
            background-color: #2980b9;
        }
        
        .btn-diagnose {
            background-color: var(--success-color);
            width: 100%;
            padding: 15px;
            font-size: 1.2rem;
            margin-top: 20px;
            font-weight: 600;
        }
        
        .btn-diagnose:hover {
            background-color: #27ae60;
        }
        
        .btn-back {
            background-color: #95a5a6;
            margin-right: 15px;
        }
        
        .btn-back:hover {
            background-color: #7f8c8d;
        }
        
        .selected-symptoms {
            background: #e8f4fd;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid var(--secondary-color);
        }
        
        .selected-title {
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        
        .selected-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .selected-item {
            background: var(--secondary-color);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.9rem;
        }
        
        .priority-list {
            margin-top: 1.5rem;
        }
        
        .priority-item {
            background: white;
            border-left: 4px solid var(--secondary-color);
            margin-bottom: 20px;
            padding: 20px;
            border-radius: 0 8px 8px 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .priority-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .priority-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .priority-number {
            background-color: var(--secondary-color);
            color: white;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.1rem;
        }
        
        .priority-probability {
            background-color: var(--light-color);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        
        .priority-title {
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--primary-color);
            font-size: 1.3rem;
        }
        
        .priority-description {
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        .priority-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 15px;
        }
        
        .detail-item {
            display: flex;
            align-items: center;
            padding: 8px;
            background: #f9f9f9;
            border-radius: 4px;
        }
        
        .detail-item i {
            margin-right: 8px;
            color: var(--secondary-color);
        }
        
        .feedback-section {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px dashed #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .btn-feedback {
            background: none;
            border: 1px solid #ddd;
            color: #666;
            padding: 6px 12px;
            border-radius: 3px;
            font-size: 0.8rem;
        }
        
        .btn-feedback:hover {
            background-color: #f5f5f5;
        }
        
        .btn-useful {
            color: var(--success-color);
            border-color: var(--success-color);
        }
        
        .btn-not-useful {
            color: var(--accent-color);
            border-color: var(--accent-color);
        }
        
        .no-results {
            text-align: center;
            padding: 3rem;
            color: #7f8c8d;
            font-size: 1.1rem;
        }
        
        .page-indicator {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .page-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ddd;
            margin: 0 5px;
            transition: background-color 0.3s;
        }
        
        .page-dot.active {
            background: var(--secondary-color);
        }
        
        footer {
            text-align: center;
            margin-top: 2rem;
            padding: 1rem;
            color: #7f8c8d;
            font-size: 0.9rem;
            border-top: 1px solid #eee;
        }
        
        @media (max-width: 768px) {
            .symptoms-grid {
                grid-template-columns: 1fr;
            }
            
            .priority-details {
                grid-template-columns: 1fr;
            }
            
            .feedback-section {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>PIS系统智能诊断助手</h1>
            <p class="subtitle">分页显示版 - 故障现象选择与诊断结果分离</p>
        </header>

        <div class="page-container">
            <!-- 第1页：故障现象选择 -->
            <div class="page active" id="page1">
                <h2 class="section-title">步骤1：选择故障现象</h2>
                
                <div class="symptom-category">
                    <h3 class="category-title">显示状态异常</h3>
                    <div class="symptoms-grid">
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="black_screen"> 屏幕黑屏
                        </label>
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="color_distortion"> 花屏/色斑
                        </label>
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="flickering"> 屏幕闪烁
                        </label>
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="dim_screen"> 屏幕过暗
                        </label>
                    </div>
                </div>
                
                <div class="symptom-category">
                    <h3 class="category-title">内容显示异常</h3>
                    <div class="symptoms-grid">
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="text_error"> 文字错误/乱码
                        </label>
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="no_info"> 无信息显示
                        </label>
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="wrong_info"> 信息显示错误
                        </label>
                    </div>
                </div>
                
                <div class="symptom-category">
                    <h3 class="category-title">影响范围</h3>
                    <div class="symptoms-grid">
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="single_screen"> 单个屏幕故障
                        </label>
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="car_section"> 单节车厢故障
                        </label>
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="whole_train"> 整列车故障
                        </label>
                    </div>
                </div>
                
                <div class="symptom-category">
                    <h3 class="category-title">其他故障</h3>
                    <div class="symptoms-grid">
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="no_sound"> 无声音/语音
                        </label>
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="update_fail"> 软件更新失败
                        </label>
                        <label class="symptom-option">
                            <input type="checkbox" name="symptom" value="boot_fail"> 系统启动失败
                        </label>
                    </div>
                </div>
                
                <button class="btn btn-diagnose" id="diagnose-btn">
                    开始智能诊断
                </button>
            </div>

            <!-- 第2页：诊断结果 -->
            <div class="page" id="page2">
                <h2 class="section-title">步骤2：诊断结果与处理建议</h2>
                
                <div class="selected-symptoms">
                    <div class="selected-title">已选择的故障现象：</div>
                    <div class="selected-list" id="selected-symptoms-list">
                        <!-- 已选症状将动态显示在这里 -->
                    </div>
                </div>
                
                <div id="results-container">
                    <div class="no-results">
                        <p>诊断结果将显示在这里</p>
                    </div>
                </div>
                
                <div class="feedback-section">
                    <span>本次诊断对您有帮助吗？</span>
                    <div>
                        <button class="btn-feedback btn-useful" id="useful-btn">有用</button>
                        <button class="btn-feedback btn-not-useful" id="not-useful-btn">无用</button>
                    </div>
                </div>
                
                <div style="margin-top: 30px; text-align: center;">
                    <button class="btn btn-back" id="back-btn">返回重新选择</button>
                    <button class="btn" id="new-diagnosis-btn">开始新的诊断</button>
                </div>
            </div>
        </div>

        <div class="page-indicator">
            <div class="page-dot active" data-page="1"></div>
            <div class="page-dot" data-page="2"></div>
        </div>

        <footer>
            <p>地铁车辆检修部 QC小组 · PIS系统智能诊断项目</p>
        </footer>
    </div>

    <script>
        // 知识库数据
        const knowledgeBase = [
            {
                id: 1,
                name: "电源空开跳闸",
                symptoms: ["black_screen", "whole_train", "no_sound"],
                probability: 0.65,
                time: 2,
                cost: 1,
                description: "检查并复位客室电气柜中的PIS系统空开",
                details: "此操作成功率高且耗时短，应作为首选检查项"
            },
            {
                id: 2,
                name: "视频线连接松动",
                symptoms: ["black_screen", "single_screen", "flickering"],
                probability: 0.70,
                time: 5,
                cost: 1,
                description: "重新插拔该屏幕的视频线接口",
                details: "单个屏幕黑屏或闪烁的常见原因"
            },
            {
                id: 3,
                name: "屏幕驱动板故障",
                symptoms: ["black_screen", "single_screen", "color_distortion"],
                probability: 0.25,
                time: 15,
                cost: 3,
                description: "更换屏幕驱动板",
                details: "若视频线检查无问题，可能是驱动板故障"
            },
            {
                id: 4,
                name: "PIS中央控制器故障",
                symptoms: ["whole_train", "black_screen", "no_info", "no_sound"],
                probability: 0.30,
                time: 30,
                cost: 4,
                description: "检查中央控制器电源及指示灯状态",
                details: "整列车无显示的潜在原因，检查控制器状态"
            },
            {
                id: 5,
                name: "网络通信中断",
                symptoms: ["wrong_info", "no_info", "car_section"],
                probability: 0.45,
                time: 10,
                cost: 2,
                description: "使用网络测试仪检测车厢间通信",
                details: "信息错误或无显示的可能原因"
            },
            {
                id: 6,
                name: "软件配置错误",
                symptoms: ["text_error", "wrong_info", "update_fail"],
                probability: 0.35,
                time: 20,
                cost: 2,
                description: "检查PIS服务器配置与数据源",
                details: "信息显示错误或乱码的软件层面原因"
            },
            {
                id: 7,
                name: "电源模块故障",
                symptoms: ["black_screen", "dim_screen", "single_screen", "car_section"],
                probability: 0.20,
                time: 25,
                cost: 3,
                description: "检测屏幕电源模块输出电压",
                details: "屏幕过暗或黑屏的电源方面原因"
            }
        ];

        // 症状名称映射
        const symptomNames = {
            "black_screen": "屏幕黑屏",
            "color_distortion": "花屏/色斑",
            "flickering": "屏幕闪烁",
            "dim_screen": "屏幕过暗",
            "text_error": "文字错误/乱码",
            "no_info": "无信息显示",
            "wrong_info": "信息显示错误",
            "single_screen": "单个屏幕故障",
            "car_section": "单节车厢故障",
            "whole_train": "整列车故障",
            "no_sound": "无声音/语音",
            "update_fail": "软件更新失败",
            "boot_fail": "系统启动失败"
        };

        // 页面切换函数
        function showPage(pageNumber) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            // 显示指定页面
            document.getElementById(`page${pageNumber}`).classList.add('active');
            
            // 更新页面指示器
            document.querySelectorAll('.page-dot').forEach(dot => {
                dot.classList.remove('active');
            });
            document.querySelector(`.page-dot[data-page="${pageNumber}"]`).classList.add('active');
        }

        // 诊断引擎
        function diagnose() {
            const selectedSymptoms = [];
            document.querySelectorAll('input[name="symptom"]:checked').forEach(checkbox => {
                selectedSymptoms.push(checkbox.value);
            });
            
            if (selectedSymptoms.length === 0) {
                alert('请至少选择一个故障现象！');
                return;
            }
            
            // 显示已选症状
            const selectedList = document.getElementById('selected-symptoms-list');
            selectedList.innerHTML = '';
            selectedSymptoms.forEach(symptomId => {
                const symptomName = symptomNames[symptomId] || symptomId;
                const symptomElement = document.createElement('div');
                symptomElement.className = 'selected-item';
                symptomElement.textContent = symptomName;
                selectedList.appendChild(symptomElement);
            });
            
            // 运行诊断
            const results = runDiagnosis(selectedSymptoms);
            
            // 显示诊断结果
            displayResults(results);
            
            // 切换到结果页面
            showPage(2);
        }

        // 运行诊断
        function runDiagnosis(symptoms) {
            const possibleCauses = knowledgeBase.filter(cause => {
                const matchedSymptoms = cause.symptoms.filter(s => symptoms.includes(s)).length;
                return matchedSymptoms > 0;
            });
            
            const scoredCauses = possibleCauses.map(cause => {
                const matchedSymptoms = cause.symptoms.filter(s => symptoms.includes(s)).length;
                const symptomMatchRatio = matchedSymptoms / Math.max(cause.symptoms.length, symptoms.length);
                
                const timeScore = 1 - (cause.time / 60);
                const costScore = 1 - (cause.cost / 5);
                
                const weight = (cause.probability * 0.6) + (timeScore * 0.3) + (costScore * 0.1);
                
                return {
                    ...cause,
                    weight: weight,
                    matchRatio: symptomMatchRatio
                };
            });
            
            return scoredCauses.sort((a, b) => b.weight - a.weight);
        }

        // 显示诊断结果
        function displayResults(causes) {
            const container = document.getElementById('results-container');
            
            if (causes.length === 0) {
                container.innerHTML = '<div class="no-results"><p>未找到匹配的故障处理方案，请尝试调整选择的症状或联系技术支持</p></div>';
                return;
            }
            
            let html = '<div class="priority-list">';
            
            causes.forEach((cause, index) => {
                const probabilityPercent = Math.round(cause.probability * 100);
                const timeColor = cause.time <= 5 ? 'var(--success-color)' : cause.time <= 15 ? 'var(--secondary-color)' : 'var(--accent-color)';
                const costText = ['极低', '低', '中', '高', '极高'][cause.cost - 1] || '未知';
                
                html += `
                <div class="priority-item" data-cause-id="${cause.id}">
                    <div class="priority-header">
                        <div class="priority-number">${index + 1}</div>
                        <div class="priority-probability">成功概率: ${probabilityPercent}%</div>
                    </div>
                    <div class="priority-title">${cause.name}</div>
                    <p class="priority-description">${cause.description}</p>
                    <div class="priority-details">
                        <div class="detail-item">
                            <i class="fas fa-clock"></i> 预计耗时: <span style="color: ${timeColor}">${cause.time} 分钟</span>
                        </div>
                        <div class="detail-item">
                            <i class="fas fa-tools"></i> 处理难度: ${costText}
                        </div>
                    </div>
                    <p>${cause.details}</p>
                </div>
                `;
            });
            
            html += '</div>';
            container.innerHTML = html;
        }

        // 反馈功能
        function provideFeedback(isUseful) {
            alert(`感谢您的反馈！本次诊断被标记为${isUseful ? '有用' : '无用'}`);
            // 在实际应用中，这里应该将反馈发送到服务器
        }

        // 初始化程序
        document.addEventListener('DOMContentLoaded', function() {
            // 诊断按钮事件
            document.getElementById('diagnose-btn').addEventListener('click', diagnose);
            
            // 返回按钮事件
            document.getElementById('back-btn').addEventListener('click', function() {
                showPage(1);
            });
            
            // 新诊断按钮事件
            document.getElementById('new-diagnosis-btn').addEventListener('click', function() {
                // 清空所有选择
                document.querySelectorAll('input[name="symptom"]').forEach(checkbox => {
                    checkbox.checked = false;
                });
                
                // 清空结果
                document.getElementById('results-container').innerHTML = '<div class="no-results"><p>诊断结果将显示在这里</p></div>';
                document.getElementById('selected-symptoms-list').innerHTML = '';
                
                showPage(1);
            });
            
            // 反馈按钮事件
            document.getElementById('useful-btn').addEventListener('click', function() {
                provideFeedback(true);
            });
            
            document.getElementById('not-useful-btn').addEventListener('click', function() {
                provideFeedback(false);
            });
            
            // 页面指示器点击事件
            document.querySelectorAll('.page-dot').forEach(dot => {
                dot.addEventListener('click', function() {
                    const pageNumber = parseInt(this.getAttribute('data-page'));
                    showPage(pageNumber);
                });
            });
        });
    </script>
</body>
</html>
